<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>收入-展示</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="./css/jquery.dataTables.min.css">
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script type="text/javascript" src="./js/jquery.dataTables.min.js"></script>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="./js/ie/html5.min.js"></script>
    <script type="text/javascript" src="./js/ie/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="x-nav">
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <div class="layui-collapse" lay-filter="test">
                        <div class="layui-colla-item">
                            <h2 class="layui-colla-title">条件筛选<i class="layui-icon layui-colla-icon"></i></h2>
                            <div class="layui-colla-content">
                                <form class="layui-form" action="selectByExampleIncomedetails" method="post">
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">时间范围</label>
                                            <div class="layui-input-inline layui-show-xs-block">
                                                <input th:value="${startTime}" class="layui-input" placeholder="开始日" name="startTime"
                                                       id="start">
                                            </div>
                                            <div class="layui-form-mid">-</div>
                                            <div class="layui-input-inline layui-show-xs-block">
                                                <input th:value="${endTime}" class="layui-input" placeholder="截止日" name="endTime" id="end">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">金额范围</label>
                                            <div class="layui-input-inline" style="width: 100px;">
                                                <input th:value="${startMoney}" type="text" name="startMoney" placeholder="￥" autocomplete="off"
                                                       class="layui-input">
                                            </div>
                                            <div class="layui-form-mid">-</div>
                                            <div class="layui-input-inline" style="width: 100px;">
                                                <input th:value="${endMoney}" type="text" name="endMoney" placeholder="￥" autocomplete="off"
                                                       class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">所属用户</label>
                                            <div class="layui-input-inline">
                                                <select name="userId" lay-verify="" lay-search="">
                                                    <option value="">All</option>
                                                    <option th:selected="${userId ==  '1'}" value="1">张峰浦</option>
                                                    <option th:selected="${userId ==  '2'}" value="2">杨小珍</option>
                                                    <option th:selected="${userId ==  '3'}" value="3">张建强</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">收入来源</label>
                                            <div class="layui-input-inline">
                                                <select name="largeclass" lay-verify="" lay-search="">
                                                    <option value="">All</option>
                                                    <option th:selected="${largeclass ==  '公司'}" value="公司">公司</option>
                                                    <option th:selected="${largeclass ==  '家庭'}" value="家庭">家庭</option>
                                                    <option th:selected="${largeclass ==  '个人'}" value="个人">个人</option>
                                                    <option th:selected="${largeclass ==  '其它'}" value="其它">其它</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label for="subclass" class="layui-form-label">
                                            <span class="x-red">*</span>收入原因</label>
                                        <div class="layui-input-inline">
                                            <input th:value="${subclass}" type="text" id="subclass" name="subclass"
                                                   autocomplete="off" class="layui-input"></div>
                                    </div>
                                    <div class="layui-form-item layui-form-text">
                                        <label for="note" class="layui-form-label">备注</label>
                                        <div class="layui-input-block">
                                            <textarea th:text="${note}" placeholder="请输入内容" id="note" name="note"
                                                      class="layui-textarea"></textarea>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-card-header">
                    <button class="layui-btn" onclick="xadmin.open('添加收入信息','./goToIncomedetailsAddNokey',800,600)">
                        <i class="layui-icon"></i>添加
                    </button>
                </div>
                <div class="layui-card-body ">
                    <table class="layui-table layui-form" id="myTable">
                        <thead>
                        <tr>
                            <th>所属id</th>
                            <th>收款时间</th>
                            <th>预计收入</th>
                            <th>实际收入</th>
                            <th>收入来源</th>
                            <th>收入原因</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="list:${lists}">
                            <td th:switch="${list.userId}">
                                <span th:case="1">张峰浦</span>
                                <span th:case="2">杨小珍</span>
                                <span th:case="3">张建强</span>
                            </td>
                            <td th:text="${#dates.format(list.timeTransaction,'yyyy-MM-dd HH:mm:ss')}">收款时间</td>
                            <td th:text="${list.amountOfMoney}+'￥'">预计收入</td>
                            <td th:text="${list.amountOfMoneyActual}+'￥'">实际收入</td>
                            <td th:text="${list.largeClass}">收入来源</td>
                            <td th:text="${list.subClass}">收入原因</td>
                            <td th:text="${list.note}">备注</td>
                            <td class="td-manage">
                                <a title="编辑" onclick="xadmin.open('支出信息修改','goToIncomedetailsEditBykey?id=12')" href="javascript:;" th:onclick="xadmin.open('收入信息修改','goToIncomedetailsEditBykey?id=[[${list.id}]]')">
                                    <i class="layui-icon">&#xe642;</i>
                                </a>
                                <a title="删除" onclick="member_del(this,'${list.id}')" href="javascript:;" th:onclick="member_del(this,'[[${list.id}]]')">
                                    <i class="layui-icon">&#xe640;</i>
                                </a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    /*用户-删除*/
    function member_del(obj,id){
        layer.confirm(id,function(index){
            //发异步删除数据
            $(obj).parents("tr").remove();
            //costdetails-edit-delete
            $.ajax({
                type:"post",
                url:"/deleteIncomedetailsByKey",
                data:{id:id},
                dataType:'json',
                success:function(data){
                    // console.log(data["num"]) //取值可以.key值
                    // console.log(data["age"]) //取值可以.key值
                    // console.log(data["peer"]) //取值可以.key值
                },
                error:function(data){
                    console.log("error");
                    console.log(data)
                }
            });


            layer.msg('已删除!'+id,{icon:1,time:1000});
        });
    }
</script>
<script>
    layui.use(['laydate', 'form'],
        function () {
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#start' //指定元素
            });
            //执行一个laydate实例
            laydate.render({
                elem: '#end' //指定元素
            });
        });
</script>
<script>
    $('#myTable').DataTable({
        "bProcessing": true,//加载进度提示(默认：false)
        "aLengthMenu": [15, 25, 50, 100], //更改显示记录数选项(默认：[10,25,50,100])
        // 国际化
        language: {
            "sProcessing": "处理中...",
            "sLengthMenu": "显示 _MENU_ 项结果",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        }
    });
</script>

</html>